<template>
	<view>
		<view>
			<u-search style="margin: 20px 15%; width: 70%;" :animation='true' placeholder="请输入商品名称" v-model="keyword"></u-search>
		</view>
		<view class="right">
			<view class="item" v-for="(item,index) in filterList" :key="index" @click="topage(index)">
				<view class="box">
					<text class="text1">{{item.stoname}}</text>
					<text class="text3" style="font-weight: 700; font-size: 120%; color: #9dc9de;">类型:&nbsp;{{item.type}}</text>
				</view>
				<view class="box">
					<text class="text2">规格:&nbsp;{{item.stospe}}</text>
					<text class="text3">数量:&nbsp;{{item.num}}</text>
				</view>
				<view class="box">
					<text class="text4">[{{item.data.substring(0, 10)}}]</text>
					<text class="text5">{{item.amount}}元</text>
				</view>
				<view class="br"></view>
			</view>
			<text v-if="options.length === 0">暂无数据</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:{},keyword:''
			}
		},
		onLoad() {
			this.getdata();
		},
		computed: {
			filterList() {
				var arr = this.list;
				if (this.keyword) {
					arr = this.list.filter(item => item.stoname.includes(this.keyword))
				}
				return arr
			}
		},
		methods: {
			async getdata(){
				const res =await this.Request({
					url:'/api/record/getallrecord',
					method:'GET',
				})
				this.list =res.data
			},
			topage(e){
				uni.navigateTo({
					url:'/pages/public/recordata?id=' + this.list[e].id
				})
			}
		}
	}
</script>

<style lang="scss">
	.right{
		margin-left: 15px;
		.item{
			margin-top: 8px;
			position: relative;
			.br{
				margin-top: 2px;
				height: 1px;
				width: 100%;
				background-color: #999999;
			}
			.box{
				width: 300px;
				.text1{
					font-size: 120%;
					font-weight: 600;
				}
				.text2{
					color: #b7e481;
				}
				.text3{
					width: 120px;
					float:right;
					color: #b7e481 ; 
				}
				.text4{
					color: #a6a6a6;
				}
				.text5{
					width: 120px;
					float:right;
					color: #a6a6a6;
				}
				.text6{
					width: 120px;
					float:right;
				}
			}
		}
	}
</style>
